<template>
  <div class="navigation-bar">
    <div class="initiator">
      <div class="logo-content">
        <img src="@/assets/img/logo.png" alt="logo" class="logo" />
        <div class="logo-text">
          <div class="platform-name">融销通</div>
          <div class="slogan">农产品融销一体平台</div>
        </div>
      </div>
      <div class="userin" v-if="!isUserLoggedIn">
        <span @click="goToLoginOrRegister('login')" class="login">登录</span>
        <span class="separator">|</span>
        <span @click="goToLoginOrRegister('register')" class="register"
          >注册</span
        >
      </div>
    </div>

    <div class="menu-content" v-cloak>
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        @select="handleSelect"
        background-color="#668d2f"
        text-color="#fff"
        active-text-color="#fff"
        class="menu"
      >
        <el-menu-item index="1" @click="navigateTo('home/front')"
          >首页</el-menu-item
        >
        <el-menu-item index="2" @click="navigateTo('home/goods')"
          >商品货源</el-menu-item
        >
        <el-menu-item index="3" @click="navigateTo('home/purchase')"
          >求购需求</el-menu-item
        >
        <el-menu-item index="4" @click="navigateTo('home/knowledge')"
          >农业知识</el-menu-item
        >
        <el-menu-item index="5" @click="navigateTo('home/guide')"
          >专家指导</el-menu-item
        >
        <el-menu-item index="6" @click="navigateTo('home/shopcart')"
          >购物车</el-menu-item
        >

        <!-- <el-submenu index="7">
          <template #title>融资申请</template>
          <el-menu-item index="7-1" @click="navigateTo('home/smartMatch')"
            >智能匹配</el-menu-item
          >
          <el-menu-item index="7-2" @click="navigateTo('home/financing')"
            >融资申请</el-menu-item
          >
        </el-submenu> -->

        <el-sub-menu index="7"  >
          <template #title >融资申请</template>
          <el-menu-item index="7-1" @click="navigateTo('home/smartMatch')"
            >智能匹配</el-menu-item
          >
          <el-menu-item index="7-2" @click="navigateTo('home/financing')"
            >融资申请</el-menu-item
          >
        </el-sub-menu>

        <el-sub-menu index="8" v-if="isUserLoggedIn">
          <template #title>设置</template>
          <el-menu-item index="8-1" @click="navigateTo('home/user')"
            >个人中心</el-menu-item
          >
          <el-menu-item
            index="8-3"
            @click="navigateTo('home/usermanage')"
            v-if="isAdmin"
            >用户管理</el-menu-item
          >
          <el-menu-item
            index="8-4"
            @click="navigateTo('home/userGood/publishedgoodsAdmin')"
            v-if="isAdmin"
            >商品管理</el-menu-item
          >
          <el-menu-item index="8-5" @click="navigateTo('home/aboutUs')"
            >关于我们</el-menu-item
          >
          <el-menu-item index="8-6" @click="logout">退出</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const activeIndex = ref("1");
const isUserLoggedIn = ref(false);
const isAdmin = ref(false);

const handleSelect = (key) => {
  activeIndex.value = key;
};

const navigateTo = (route) => {
  
  router.push(`/${route}`).catch((err) => err);
};

const goToLoginOrRegister = (type) => {
  router.push({ path: "/loginOrRegister", params: { type } });
};

const logout = () => {
  isUserLoggedIn.value = false;
  router.push("/home").catch((err) => err);
};


import { useTokenStore } from "@/stores/token.js";
import { useUserInfoStore } from "@/stores/user.js";
import { loginSelectByUsername } from "@/api/user.js";
// 获取用户信息，并判断是否为管理员
const fetchUserInfo = async () => {
  const tokenStore = useTokenStore();
  if (tokenStore.token) {
    isUserLoggedIn.value = true;
    const userStore = useUserInfoStore();
    const userInfo = await loginSelectByUsername();
    userStore.setInfo(userInfo.data);
    if (userInfo.data.role === "admin") {
      isAdmin.value = true;
    }
  }
};
fetchUserInfo();
</script>

<style lang="scss" scoped>
.navigation-bar {
  width: 100%;
  // background-color: #ffffff;
  // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

  .initiator {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;

    .logo-content {
      display: flex;
      align-items: center;

      .logo {
        height: 50px;
        width: auto;
        margin-right: 10px;
      }

      .logo-text {
        .platform-name {
          font-size: 20px;
          font-weight: bold;
          color: #035d1c;
        }

        .slogan {
          font-size: 12px;
          color: #666;
        }
      }
    }

    .userin {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;

      .login,
      .register {
        width: 60px;
        cursor: pointer;
        color: #035d1c;
        transition: color 0.3s;

        &:hover {
          color: #1a7432;
        }
      }

      .separator {
        color: #666;
      }
    }
  }

  .menu-content {
    .menu {
      height: 50px;
      padding: 0;
      margin: 0 auto;
      width: 1300px;
      display: flex;
      justify-content: flex-start;
      // align-items: center;

      .el-menu-item {
        width: 130px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        padding: 0 0;

        &:hover {
          background-color: #5a7b2a;
        }
      }

      .el-menu--horizontal {
        border-bottom: none; // 去掉边框
      }
    }
  }

  [v-cloak] {
    display: none;
  }
}
</style>
